<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxm">
    <script src="../jQuery/jquery-3.1.1.js"></script>
    <title>图片切换</title>
    <style>
        main{
            width: 192px;
            height: 503px;       
            margin: 60px auto;     
            border: 1px solid #ccc;
        }
         h1{
             display: inline-block;
             margin: 0;
             width: 100%;
             height: 31px;
             background-color: #e9e5e3;
             font-size: 18px;
             text-align: center;
             line-height: 31px;
         }   
         ul,li{
             margin: 0;
             padding: 0;
             list-style: none;
             overflow: hidden;
         }         
         li>img.one{
             position: absolute;
             top: 0px;
             left: 0px;
         }
         li>img.two{
             position: absolute;
             top: 0px;
             left: 180px;
         }
         li{
             width: 180px;
             height: 156px;
             margin-left: 6px;
             position: relative;             
         }
         ul li:nth-child(1){
             margin-top: 5px;
         }
         p{
             margin: 0;
             display: inline-block;
             width: 180px;
             height: 25px;
             color: #fff;
             text-align: center;
             line-height: 25px;
             z-index: 999;
         }
         #first>p,
         #second>p,
         #third>p{
             position: absolute;
             left: 0;
             bottom: 6px;
         }
         #first p{             
             background-color: #d96160;             
         }
         #second p{             
             background-color: #134752;
         }
         #third p{             
             background-color: #2271af;
         }
        </style>
</head>

<body>
    <main>
        <h1>专辑推荐</h1>
        <ul>
            <li id="first">
                <img src="img/1_1.jpg" class="one">
                <img src="img/1_2.jpg" class="two">
                <p>COCOON/可可尼</p>
                <p>几何为网-极致绚烂</p>
            </li>
            <li id="second">
                <img src="img/2_1.jpg" class="one">
                <img src="img/2_2.jpg" class="two">
                <p>INSUN/恩裳</p>
                <p>2013春印象</p>
            </li>
            <li id="third">
                <img src="img/3_1.jpg" class="one">
                <img src="img/3_2.jpg" class="two">
                <p>JNBY/江南布衣</p>
                <p>NANMENG/南梦</p>
            </li>
        </ul>
    </main>
</body>

</html>

<script>

    $('li').hover(function(){
        $(this).find($('img')).eq(0).stop().animate({left:-180},600)
        $(this).find($('img')).eq(1).stop().animate({left:0},600)
        $(this).find($('p')).eq(0).stop().animate({height:0},600)
        $(this).find($('p')).eq(1).stop().animate({height:25},600)
    },function(){
        $(this).find($('img')).eq(0).stop().animate({left:0},600)
        $(this).find($('img')).eq(1).stop().animate({left:180},600)
        $(this).find($('p')).eq(0).stop().animate({height:25},600)
        $(this).find($('p')).eq(1).stop().animate({height:0},600)
    })
    // console.log($('p'))

</script>